<!--
 * @Author: lixb
 * @Date: 2020-08-19 10:07:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-09-24 10:08:30
 * @Descripttion: 日历
-->
<template>
  <div>
    <el-card class="box-card calendar-card">
      <div class="modul-title">
        <img src="@/assets/img/日历.png" style="height: 25px;width: 25px;margin-right: 10px;" />
        <span>日历</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="18" :gutter="15">
          <div class="calendar">
            <calendar
              ref="calendar"
              :zero="calendar.zero"
              :lunar="calendar.lunar"
              :value="calendar.value"
              :begin="calendar.begin"
              :end="calendar.end"
              @next="switchMonth"
              @prev="switchMonth"
              @getLunarInfo="getLunarInfo"
              @select="calendar.select"
            ></calendar>
          </div>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div class="text item">
              <div class="festive">本月重要节气</div>
              <ul class="festive-list">
                <li v-for="(item, index) in festivalList" :key="index">
                  <span style="color: #604AFF;font-weight: bold;font-size: 20px;">·</span>
                  {{ item }}
                </li>
              </ul>
              <el-button type="primary" style="width: 100%;background: #604AFF;" @click="showCard">
                贺卡祝福
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <img src="@/assets/img/背景图.png" class="festive-img" />
    </el-card>
    <greetCardBless :is-open="isOpen" @closeDrawer="closeDrawer"></greetCardBless>
  </div>
</template>

<script>
  import { getLocalData } from '@/utils/localStore';
  import greetCardBless from '@/components/greetCardBless/index.vue'; //贺卡祝福
  import calendar from '@/views/dashboard/calendar/calendar.vue'; //日历
  export default {
    components: {
      calendar,
      greetCardBless,
    },
    data() {
      return {
        isOpen: false,
        cMonth: '', //当前月
        cYear: '', //当前年
        festivalList: [],
        lunarInfoArr: [],
        calendar: {
          show: false,
          zero: true,
          value: [], //默认日期
          lunar: true, //显示农历
          select: value => {
            this.calendar.value = value;
          },
        },
      };
    },
    watch: {
      cMonth() {
        this.lunarInfoArr = [];
      },
      cYear() {
        this.lunarInfoArr = [];
      },
    },
    activated() {
      this.switchMonth(new Date().getMonth() + 1);
    },
    methods: {
      showCard() {
        if (getLocalData('authKeys') && getLocalData('authKeys')['WALFARE-NJRL-HKZF']) {
          this.isOpen = true;
        } else {
          this.$message.error('暂无操作权限！');
        }
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-26 15:39:19
       * @msg: 选择月份时，截取节日日期的月份部分等于本月时，拿到节日名称push到数组中渲染
       */
      switchMonth(m, y) {
        this.cMonth = m;
        this.cYear = y;

        this.festivalList = [];
        let gregorianFestivalArr = Object.keys(this.$refs.calendar.festival.gregorian);
        for (var item in gregorianFestivalArr) {
          if (m == gregorianFestivalArr[item].split('-')[0]) {
            this.festivalList.push(
              this.$refs.calendar.festival.gregorian[gregorianFestivalArr[item]]
            );
          }
        }
        let lunarFestivalArr = Object.keys(this.$refs.calendar.festival.lunar);
        for (var l in lunarFestivalArr) {
          for (var t in this.lunarInfoArr) {
            if (lunarFestivalArr[l] == this.lunarInfoArr[t]) {
              this.festivalList.push(this.$refs.calendar.festival.lunar[lunarFestivalArr[l]]);
            }
          }
        }
      },
      // eslint-disable-next-line no-unused-vars
      getLunarInfo(val) {
        this.lunarInfoArr.push(val);
      },
      closeDrawer() {
        this.isOpen = false;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .calendar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 2px;
  }
  .calendar-card {
    position: relative;
    border-radius: 10px;
    margin-top: 10px;
    .festive {
      font-weight: bold;
      font-size: 14px;
    }
    .festive-list {
      list-style: none;
      font-size: 12px;
      padding: 0;
      li {
        margin-top: 5px;
      }
    }
    .festive-img {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .modul-title * {
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin-bottom: 20px;
  }
</style>
